<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>易居</title>
    <link rel="stylesheet" href="../css/zlh_bootstrap.min.css">
    <link rel="stylesheet" href="../css/zlh_main.css">
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="/js/jquery.tmpl.js"></script>
    <style>
        body {
            background-color: #f5f5f5;
        }
        .user-main .main-right .initial, .user-main .tab-content .tab-pane {
            margin: 20px auto;
        }
    </style>
</head>
<body>

 <!--模态框（Modal） -->

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">评价</h4>
            </div>
            <form action="/add_comment" method="post" id="appointment_form">
                <input id="userId1" name="userId" type="hidden" >
                <input id="appointmentId" name="appointmentId" type="hidden" >
                <div class="modal-body">
                    <span style="padding-left: 6rem">星级:&nbsp;</span>
                    <label class="radio-inline">
                        <input type="radio" name="star" id="inlineRadio1" value="1"> 1星
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="star" id="inlineRadio2" value="2"> 2星
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="star" id="inlineRadio3" value="3"> 3星
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="star" id="inlineRadio4" value="4"> 4星
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="star" id="inlineRadio5" value="5"> 5星
                    </label>
                    <br/><br/>
                    <span style="padding-left: 6rem">描述:&nbsp;</span>
                    <!--<textarea style="width: 400px; border-radius: 4px; border: 1px solid #b6bec5" name="remark"></textarea>-->
                    <input style="width: 400px; height: 34px; border-radius: 4px; border: 1px solid #b6bec5" name="content"/>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="submit"  class="btn btn-primary">提交评价</button>
                </div>
            </form>

        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>


 <script id="each1" type="text/x-jquery-tmpl">
     <div class="tab-pane fade in active" id="all">
           <div class="container">
                 <div class="row" style="padding-bottom: 5px;padding-top: 5px">
                       <div class="col-sm-6">
                            <div style="padding-top:5px; font-weight: bold; font-family: 'Hiragino Sans GB', 'Microsoft Yahei UI', 'Microsoft Yahei', 微软雅黑, 'Segoe UI', Tahoma, 宋体b8b体, SimSun, sans-serif;">房源:<span>${house.houseName}</span></div>
                            <div style="padding-top:5px; font-weight: bold; font-family: 'Hiragino Sans GB', 'Microsoft Yahei UI', 'Microsoft Yahei', 微软雅黑, 'Segoe UI', Tahoma, 宋体b8b体, SimSun, sans-serif;">经纪人:<span>${agent.agentName}</span></div>
                            <div style="padding-top:5px; font-weight: bold; font-family: 'Hiragino Sans GB', 'Microsoft Yahei UI', 'Microsoft Yahei', 微软雅黑, 'Segoe UI', Tahoma, 宋体b8b体, SimSun, sans-serif;">联系方式:<span>${agent.telephone}</span></div>
                            <div style="padding-top:5px; font-weight: bold; font-family: 'Hiragino Sans GB', 'Microsoft Yahei UI', 'Microsoft Yahei', 微软雅黑, 'Segoe UI', Tahoma, 宋体b8b体, SimSun, sans-serif;">时间:<span>${orderTime}</span></div>
                        </div>
                        <div class="col-sm-3">
                               {{if finished==false}}
                               <div style="padding-top:5px; font-weight: bold; font-family: 'Hiragino Sans GB', 'Microsoft Yahei UI', 'Microsoft Yahei', 微软雅黑, 'Segoe UI', Tahoma, 宋体b8b体, SimSun, sans-serif;">未完成</div>
                               {{else comment==null}}
                               <div style="padding-top:5px; font-weight: bold; font-family: 'Hiragino Sans GB', 'Microsoft Yahei UI', 'Microsoft Yahei', 微软雅黑, 'Segoe UI', Tahoma, 宋体b8b体, SimSun, sans-serif;">已完成</div>
                               {{else}}
                               <div style="padding-top:5px; font-weight: bold; font-family: 'Hiragino Sans GB', 'Microsoft Yahei UI', 'Microsoft Yahei', 微软雅黑, 'Segoe UI', Tahoma, 宋体b8b体, SimSun, sans-serif;">已评价</div>
                               {{/if}}

                          </div>
                 </div>
                 <hr style="background-color: aliceblue; height: 2px; width: 945px; margin: unset; border: unset">

           </div>
      </div>
 </script>

 <script id="each2" type="text/x-jquery-tmpl">
     <div class="tab-pane fade in active" id="all">
            <div class="container">
                  <div class="row" style="padding-bottom: 5px;padding-top: 5px">
                        <div class="col-sm-6">
                              <div style="padding-top:5px; font-weight: bold; font-family: 'Hiragino Sans GB', 'Microsoft Yahei UI', 'Microsoft Yahei', 微软雅黑, 'Segoe UI', Tahoma, 宋体b8b体, SimSun, sans-serif;">房源:<span>${house.houseName}</span></div>
                               <div style="padding-top:5px; font-weight: bold; font-family: 'Hiragino Sans GB', 'Microsoft Yahei UI', 'Microsoft Yahei', 微软雅黑, 'Segoe UI', Tahoma, 宋体b8b体, SimSun, sans-serif;">经纪人:<span>${agent.agentName}</span></div>
                               <div style="padding-top:5px; font-weight: bold; font-family: 'Hiragino Sans GB', 'Microsoft Yahei UI', 'Microsoft Yahei', 微软雅黑, 'Segoe UI', Tahoma, 宋体b8b体, SimSun, sans-serif;">联系方式:<span>${agent.telephone}</span></div>
                               <div style="padding-top:5px; font-weight: bold; font-family: 'Hiragino Sans GB', 'Microsoft Yahei UI', 'Microsoft Yahei', 微软雅黑, 'Segoe UI', Tahoma, 宋体b8b体, SimSun, sans-serif;">时间:<span>${orderTime}</span></div>
                        </div>
                        <div class="col-sm-3">
                                <button data-toggle="modal" id="bt1" onclick="new function f() {
                                    document.getElementById('userId1').value='${user.userId}';
                                      document.getElementById('appointmentId').value='${appointmentId}';
                                     }" data-target="#myModal" type="button" class="btn btn-success btn-sm" style="">评价</button>
                          </div>

                  </div>
                  <hr style="background-color: aliceblue; height: 2px; width: 945px; margin: unset; border: unset">

            </div>
     </div>
 </script>

 <script id="pageview" type="text/x-jquery-tmpl">
        <div class="row">
            <nav style="text-align: right" aria-label="Page navigation">
                <ul class="pagination">
                    <li>
                        <a href="#" aria-label="Previous" id="first">
                            <span aria-hidden="true">首页</span>
                        </a>
                    </li>

                    <li >
                        <a href="#" id="pre" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>

                    <li ><a id="text" style="color: black">第${current}页/共${pages}页</a></li>
                    <li >
                        <a href="#" id="next" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span></a>
                    </li>

                    <li>
                        <a href="#" id="final">
                            <span aria-hidden="true" >末页</span>
                        </a>
                    </li>

                </ul>
            </nav>
        </div>
</script>

 <script>
     var hasNextPage;
     var hasPrePage;
     var userId;
     var current;
     var sumpage;
     var appointmentId;
     $(function () {
         $("#tap1").click(function () {

             userId = $("#userId").val();
             $.ajax({
                 type: "get",
                 url: "/ajax_appointment_list?userId=" + userId,
                 dataType: "json",
                 success: populate
             });

             function populate(data) {
                 console.log(data);
                 hasNextPage = eval('data.hasNextPage');
                 hasPrePage = eval('data.hasPrePage');
                 current = eval('data.current');
                 sumpage = eval('data.pages');
                 console.log(eval('data.result'));
                 $('#content').html('');
                 $('#each1').tmpl(eval('data.result')).appendTo('#content');
                 $('#page').html('');
                 $('#pageview').tmpl(data).appendTo('#page');

                 $("#next").click(function () {
                     if (hasNextPage) {
                         $.ajax({
                             type: "get",
                             url: "/ajax_appointment_list?userId=" + userId + "&page=" + (++current),
                             dataType: "json",
                             success: solve
                         });

                         function solve(data) {
                             hasNextPage = eval('data.hasNextPage');
                             hasPrePage = eval('data.hasPrePage');
                             current = eval('data.current');
                             console.log(data);
                             console.log(hasPrePage);
                             console.log(hasNextPage);
                             //模板   绑定    数据      添加到   指定的div或者是容器里面
                             $('#content').html('');
                             $('#each1').tmpl(eval('data.result')).appendTo('#content');
                             /* $('#pageview').tmpl(data).replaceAll('#page');*/
                             $("#text").text("第" + current + "页/共" + sumpage + "页");
                         }

                     }
                 });
                 $("#pre").click(function () {
                     console.log(hasPrePage);
                     if (hasPrePage) {
                         $.ajax({
                             type: "get",
                             url: "/ajax_appointment_list?userId=" + userId + "&page=" + (--current),
                             dataType: "json",
                             success: solve
                         });

                         function solve(data) {
                             hasNextPage = eval('data.hasNextPage');
                             hasPrePage = eval('data.hasPrePage');
                             current = eval('data.current');
                             console.log(data);
                             console.log(hasPrePage);
                             console.log(hasNextPage);
                             //模板   绑定    数据      添加到   指定的div或者是容器里面
                             $('#content').html('');
                             $('#each1').tmpl(eval('data.result')).appendTo('#content');
                             $("#text").text("第" + current + "页/共" + sumpage + "页");
                             /*$('#pageview').tmpl(data).replaceAll('#page');*/
                         }

                     }
                 })
                 $("#first").click(function () {
                     if (current != 1) {
                         $.ajax({
                             type: "get",
                             url: "/ajax_appointment_list?userId=" + userId + "&page=" + 1,
                             dataType: "json",
                             success: solve
                         });

                         function solve(data) {
                             hasNextPage = eval('data.hasNextPage');
                             hasPrePage = eval('data.hasPrePage');
                             current = eval('data.current');
                             console.log(data);
                             console.log(hasPrePage);
                             console.log(hasNextPage);
                             //模板   绑定    数据      添加到   指定的div或者是容器里面
                             $('#content').html('');
                             $('#each1').tmpl(eval('data.result')).appendTo('#content');
                             /* $('#pageview').tmpl(data).replaceAll('#page');*/
                             $("#text").text("第" + current + "页/共" + sumpage + "页");
                         }

                     }
                 });
                 $("#final").click(function () {
                     if (hasNextPage && current != sumpage) {
                         $.ajax({
                             type: "get",
                             url: "/ajax_appointment_list?userId=" + userId + "&page=" + sumpage,
                             dataType: "json",
                             success: solve
                         });

                         function solve(data) {
                             hasNextPage = eval('data.hasNextPage');
                             hasPrePage = eval('data.hasPrePage');
                             current = eval('data.current');
                             console.log(data);
                             console.log(hasPrePage);
                             console.log(hasNextPage);
                             //模板   绑定    数据      添加到   指定的div或者是容器里面
                             $('#content').html('');
                             $('#each1').tmpl(eval('data.result')).appendTo('#content');
                             /* $('#pageview').tmpl(data).replaceAll('#page');*/
                             $("#text").text("第" + current + "页/共" + sumpage + "页");
                         }

                     }
                 });


             }
         });
         $('#tap1').trigger("click");

         $("#tap2").click(function () {

             userId = $("#userId").val();
             $.ajax({
                 type: "get",
                 url: "/ajax_appointment_list?userId=" + userId+"&finished=false",
                 dataType: "json",
                 success: populate
             });

             function populate(data) {
                 console.log(data);
                 hasNextPage = eval('data.hasNextPage');
                 hasPrePage = eval('data.hasPrePage');
                 current = eval('data.current');
                 sumpage = eval('data.pages');
                 console.log(eval('data.result'));
                 $('#content').html('');
                 $('#each1').tmpl(eval('data.result')).appendTo('#content');
                 $('#page').html('');
                 $('#pageview').tmpl(data).appendTo('#page');

                 $("#next").click(function () {
                     if (hasNextPage) {
                         $.ajax({
                             type: "get",
                             url: "/ajax_appointment_list?userId=" + userId + "&finished=false&page=" + (++current),
                             dataType: "json",
                             success: solve
                         });

                         function solve(data) {
                             hasNextPage = eval('data.hasNextPage');
                             hasPrePage = eval('data.hasPrePage');
                             current = eval('data.current');
                             console.log(data);
                             console.log(hasPrePage);
                             console.log(hasNextPage);
                             //模板   绑定    数据      添加到   指定的div或者是容器里面
                             $('#content').html('');
                             $('#each1').tmpl(eval('data.result')).appendTo('#content');
                             /* $('#pageview').tmpl(data).replaceAll('#page');*/
                             $("#text").text("第" + current + "页/共" + sumpage + "页");
                         }

                     }
                 });
                 $("#pre").click(function () {
                     console.log(hasPrePage);
                     if (hasPrePage) {
                         $.ajax({
                             type: "get",
                             url: "/ajax_appointment_list?userId=" + userId + "&finished=false&page=" + (--current),
                             dataType: "json",
                             success: solve
                         });

                         function solve(data) {
                             hasNextPage = eval('data.hasNextPage');
                             hasPrePage = eval('data.hasPrePage');
                             current = eval('data.current');
                             console.log(data);
                             console.log(hasPrePage);
                             console.log(hasNextPage);
                             //模板   绑定    数据      添加到   指定的div或者是容器里面
                             $('#content').html('');
                             $('#each1').tmpl(eval('data.result')).appendTo('#content');
                             $("#text").text("第" + current + "页/共" + sumpage + "页");
                             /*$('#pageview').tmpl(data).replaceAll('#page');*/
                         }

                     }
                 })
                 $("#first").click(function () {
                     if (current != 1) {
                         $.ajax({
                             type: "get",
                             url: "/ajax_appointment_list?userId=" + userId + "&finished=false&page=" + 1,
                             dataType: "json",
                             success: solve
                         });

                         function solve(data) {
                             hasNextPage = eval('data.hasNextPage');
                             hasPrePage = eval('data.hasPrePage');
                             current = eval('data.current');
                             console.log(data);
                             console.log(hasPrePage);
                             console.log(hasNextPage);
                             //模板   绑定    数据      添加到   指定的div或者是容器里面
                             $('#content').html('');
                             $('#each1').tmpl(eval('data.result')).appendTo('#content');
                             /* $('#pageview').tmpl(data).replaceAll('#page');*/
                             $("#text").text("第" + current + "页/共" + sumpage + "页");
                         }

                     }
                 });
                 $("#final").click(function () {
                     if (hasNextPage && current != sumpage) {
                         $.ajax({
                             type: "get",
                             url: "/ajax_appointment_list?userId=" + userId + "&finished=false&page=" + sumpage,
                             dataType: "json",
                             success: solve
                         });

                         function solve(data) {
                             hasNextPage = eval('data.hasNextPage');
                             hasPrePage = eval('data.hasPrePage');
                             current = eval('data.current');
                             console.log(data);
                             console.log(hasPrePage);
                             console.log(hasNextPage);
                             //模板   绑定    数据      添加到   指定的div或者是容器里面
                             $('#content').html('');
                             $('#each1').tmpl(eval('data.result')).appendTo('#content');
                             /* $('#pageview').tmpl(data).replaceAll('#page');*/
                             $("#text").text("第" + current + "页/共" + sumpage + "页");
                         }

                     }
                 });


             }
         });

         $("#tap3").click(function () {
             userId = $("#userId").val();
             $.ajax({
                 type: "get",
                 url: "/ajax_appointment_list?userId=" + userId+"&finished=true&commented=false",
                 dataType: "json",
                 success: populate
             });

             function populate(data) {
                 console.log(data);
                 appointmentId=eval('data.result.appointmentId');
                 console.log(appointmentId);
                 hasNextPage = eval('data.hasNextPage');
                 hasPrePage = eval('data.hasPrePage');
                 current = eval('data.current');
                 sumpage = eval('data.pages');
                 console.log(eval('data.result'));
                 $('#content').html('');
                 $('#each2').tmpl(eval('data.result')).appendTo('#content');
                 $('#page').html('');
                 $('#pageview').tmpl(data).appendTo('#page');

                 $("#next").click(function () {
                     if (hasNextPage) {
                         $.ajax({
                             type: "get",
                             url: "/ajax_appointment_list?userId=" + userId + "&finished=true&commented=false&page=" + (++current),
                             dataType: "json",
                             success: solve
                         });

                         function solve(data) {
                             hasNextPage = eval('data.hasNextPage');
                             hasPrePage = eval('data.hasPrePage');
                             current = eval('data.current');
                             console.log(data);
                             console.log(hasPrePage);
                             console.log(hasNextPage);
                             //模板   绑定    数据      添加到   指定的div或者是容器里面
                             $('#content').html('');
                             $('#each2').tmpl(eval('data.result')).appendTo('#content');
                             /* $('#pageview').tmpl(data).replaceAll('#page');*/
                             $("#text").text("第" + current + "页/共" + sumpage + "页");
                         }

                     }
                 });
                 $("#pre").click(function () {
                     console.log(hasPrePage);
                     if (hasPrePage) {
                         $.ajax({
                             type: "get",
                             url: "/ajax_appointment_list?userId=" + userId + "&finished=true&commented=false&page=" + (--current),
                             dataType: "json",
                             success: solve
                         });

                         function solve(data) {
                             hasNextPage = eval('data.hasNextPage');
                             hasPrePage = eval('data.hasPrePage');
                             current = eval('data.current');
                             console.log(data);
                             console.log(hasPrePage);
                             console.log(hasNextPage);
                             //模板   绑定    数据      添加到   指定的div或者是容器里面
                             $('#content').html('');
                             $('#each2').tmpl(eval('data.result')).appendTo('#content');
                             $("#text").text("第" + current + "页/共" + sumpage + "页");
                             /*$('#pageview').tmpl(data).replaceAll('#page');*/
                         }

                     }
                 })
                 $("#first").click(function () {
                     if (current != 1) {
                         $.ajax({
                             type: "get",
                             url: "/ajax_appointment_list?userId=" + userId + "&finished=true&commented=false&page=" + 1,
                             dataType: "json",
                             success: solve
                         });

                         function solve(data) {
                             hasNextPage = eval('data.hasNextPage');
                             hasPrePage = eval('data.hasPrePage');
                             current = eval('data.current');
                             console.log(data);
                             console.log(hasPrePage);
                             console.log(hasNextPage);
                             //模板   绑定    数据      添加到   指定的div或者是容器里面
                             $('#content').html('');
                             $('#each2').tmpl(eval('data.result')).appendTo('#content');
                             /* $('#pageview').tmpl(data).replaceAll('#page');*/
                             $("#text").text("第" + current + "页/共" + sumpage + "页");
                         }

                     }
                 });
                 $("#final").click(function () {
                     if (hasNextPage && current != sumpage) {
                         $.ajax({
                             type: "get",
                             url: "/ajax_appointment_list?userId=" + userId + "&finished=true&commented=false&page=" + sumpage,
                             dataType: "json",
                             success: solve
                         });

                         function solve(data) {
                             hasNextPage = eval('data.hasNextPage');
                             hasPrePage = eval('data.hasPrePage');
                             current = eval('data.current');
                             console.log(data);
                             console.log(hasPrePage);
                             console.log(hasNextPage);
                             //模板   绑定    数据      添加到   指定的div或者是容器里面
                             $('#content').html('');
                             $('#each2').tmpl(eval('data.result')).appendTo('#content');
                             /* $('#pageview').tmpl(data).replaceAll('#page');*/
                             $("#text").text("第" + current + "页/共" + sumpage + "页");
                         }

                     }
                 });




             }
         });
     })


 </script>




<nav th:replace="~{topbar::top}"></nav>
<div class="container">
    <div class="row">
        <div th:replace="~{userPage/sidebar::side}"></div>
        <div class="col-sm-10">
            <div class="user-main">
                <div class="main-right fr">
                    <div class="title">看房日程</div>
                    <input id="userId" type="hidden" th:value="${user.userId}">
                    <ul id="myTab" class="nav nav-tabs">
                        <li ><a href="#" id="tap1"> 全部 </a></li>
                        <li><a href="#" id="tap2"> 待看 </a></li>
                        <li><a href="#" id="tap3"> 未评价 </a></li>
                    </ul>
                    <div id="content" ></div>
                    <div id="page" ></div>
                </div>
            </div>
        </div>
    </div>
</div>



<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
</body>
</html>